<template>
  <view class="industry-container">
    <view class="header">
      <text class="title">所在行业</text>
      <text class="tip">请选择行业，最多一个</text>
    </view>

    <!-- 行业选择 -->
    <view class="industry-list">
      <view
        class="industry-item"
        v-for="(item, index) in industryList"
        :key="index"
        @click="toggleSubIndustry(index)"
      >
        <view class="industry-header">
          <text class="industry-title">{{ item.name }}</text>
          <uni-icons
            :type="item.expanded ? 'arrowup' : 'arrowdown'"
            size="16"
            color="#D8D8D8"
          ></uni-icons>
        </view>
        <view v-if="item.expanded" class="sub-industry-list">
          <view
            class="sub-industry-item"
            v-for="(subItem, subIndex) in item.subIndustries"
            :key="subIndex"
            @click.stop="selectIndustry(subItem)"
            :style="{
              backgroundColor: selectedIndustry === subItem ? '#CACCFF' : '#ECECEC',
            }"
          >
            <text class="sub-industry-name">{{ subItem }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 保存按钮 -->
    <view class="save-button-container">
      <button class="save-button" @click="saveIndustry">保存</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 行业数据
      industryList: [
        {
          name: "互联网/AI",
          expanded: false,
          subIndustries: ["互联网", "人工智能", "大数据"],
        },
        {
          name: "电子/通信/半导体",
          expanded: false,
          subIndustries: ["电子", "通信", "半导体"],
        },
        {
          name: "教育培训",
          expanded: false,
          subIndustries: ["培训/辅导", "职业培训", "学前教育", "机构培训", "学历教育", "学术/科研"],
        },
		{
		  name: "电子/通信/半导体",
		  expanded: false,
		  subIndustries: ["电子", "通信", "半导体"],
		},
		{
		  name: "电子/通信/半导体",
		  expanded: false,
		  subIndustries: ["电子", "通信", "半导体"],
		},
		{
		  name: "电子/通信/半导体",
		  expanded: false,
		  subIndustries: ["电子", "通信", "半导体"],
		},
		{
		  name: "电子/通信/半导体",
		  expanded: false,
		  subIndustries: ["电子", "通信", "半导体"],
		},
		{
		  name: "电子/通信/半导体",
		  expanded: false,
		  subIndustries: ["电子", "通信", "半导体"],
		},
		{
		  name: "电子/通信/半导体",
		  expanded: false,
		  subIndustries: ["电子", "通信", "半导体"],
		},
      ],
      selectedIndustry: null, // 当前选中的行业
    };
  },
  methods: {
    // 切换二级分类展开状态
    toggleSubIndustry(index) {
      this.industryList[index].expanded = !this.industryList[index].expanded;
    },
    // 选择行业
    selectIndustry(industry) {
      this.selectedIndustry = industry;
    },
    // 保存选择的行业
    saveIndustry() {
      if (!this.selectedIndustry) {
        uni.showToast({
          title: "请选择一个行业",
          icon: "none",
        });
        return;
      }

      // 返回上一页并传递选择的行业
      const eventChannel = this.getOpenerEventChannel();
      eventChannel.emit("updateIndustry", this.selectedIndustry);

      uni.navigateBack();
    },
  },
};
</script>

<style scoped>
.industry-container {
  padding: 20px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

.header .title {
  font-size: 20px;
  display: block;
  color: #000;
  margin-bottom: 5px;
}

.header .tip {
  color: #707070;
  font-size: 10px;
}

.industry-list {
  margin-bottom: 80px; /* 为保存按钮留出空间 */
}

.industry-item {
  margin-bottom: 20px;
}

.industry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #ebebeb;
  cursor: pointer;
}

.industry-title {
  font-size: 16px;
  color: #151515;
}

.sub-industry-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 控制子项之间的间距 */
  margin-top: 10px;
}

.sub-industry-item {
  width: calc((100% - 30px) / 4); /* 每行显示4个，减去间隙 */
  text-align: center;
  line-height: 30px;
  height: 30px;
  border-radius: 4px;
  background: #ECECEC;
  cursor: pointer;
}

.sub-industry-name {
  font-size: 14px;
  color: #666;
}

.save-button-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 10px 20px;
}

.save-button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
	border-radius: 32px;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
}

</style>